import React from 'react'
import { Dimensions, PixelRatio, Platform, StatusBar, View } from 'react-native'

import { Header } from 'react-navigation'

let props = {}
export default class Resolution {
  static get (useFixWidth = true) {
    return useFixWidth ? { ...props.fw } : { ...props.fh }
  }

  static setDesignSize (dim = 'window', dwidth = 750, dheight = 1336) {
    let designSize = { width: dwidth, height: dheight }

    let navHeight = Platform.OS === 'android' ? StatusBar.currentHeight : 64
    let pxRatio = PixelRatio.get(dim)
    let { width, height } = Dimensions.get(dim)
    // 如果有状态栏要减去状态栏的高度
    if (dim !== 'screen') height -= navHeight
    let w = PixelRatio.getPixelSizeForLayoutSize(width)
    let h = PixelRatio.getPixelSizeForLayoutSize(height)

    let fw_design_scale = designSize.width / w
    let fw_width = designSize.width
    let fw_height = h * fw_design_scale
    let fw_scale = 1 / pxRatio / fw_design_scale

    // let fh_design_scale = designSize.height / h
    // fh_width = w * fh_design_scale
    // fh_height = designSize.height
    // fh_scale = 1 / pxRatio / fh_design_scale

    props.fw = {
      width: fw_width,
      height: fw_height,
      scale: fw_scale,
      navHeight,
      fw_design_scale: fw_design_scale
    }
    // props.fh = {
    //   width: fh_width,
    //   height: fh_height,
    //   scale: fh_scale,
    //   navHeight
    // }
  }

  /**
   * fwp 即是props.fw
   * p 页面中传入的属性
   */
  static getWidthViewHeight = (fwp, hasNav) => {
    // 初始高度是屏幕高度
    let { height, fw_design_scale } = fwp
    // 如果没有导航栏则直接返回屏幕高度
    if (!hasNav) return height
    // 获取导航栏高度
    let navHeight = Header.HEIGHT
    // 转换
    navHeight = PixelRatio.getPixelSizeForLayoutSize(navHeight)
    // 缩放
    navHeight = navHeight * fw_design_scale
    // 减去导航栏高度
    height -= navHeight
    return height
  }

  static FixWidthView = p => {
    let { width, scale } = props.fw
    let height = Resolution.getWidthViewHeight(props.fw, p.hasNav)
    let xstyle = {
      // marginTop: navHeight,
      width: width,
      height: height,
      backgroundColor: 'transparent',
      transform: [
        { translateX: -width * 0.5 },
        { translateY: -height * 0.5 },
        { scale: scale },
        { translateX: width * 0.5 },
        { translateY: height * 0.5 }
      ],
      ...p.style
    }
    console.log(JSON.stringify(xstyle))
    return (
      // {...p}
      <View style={xstyle}>{p.children}</View>
    )
  }

  // static FixHeightView = p => {
  //   let { width, height, scale, navHeight } = props.fh
  //   return (
  //     // {...p}
  //     <View
  //       style={{
  //         marginTop: navHeight,
  //         width: width,
  //         height: height,
  //         backgroundColor: 'transparent',
  //         transform: [
  //           { translateX: -width * 0.5 },
  //           { translateY: -height * 0.5 },
  //           { scale: scale },
  //           { translateX: width * 0.5 },
  //           { translateY: height * 0.5 }
  //         ],
  //         ...p.style
  //       }}
  //     >
  //       {p.children}
  //     </View>
  //   )
  // }
}
// init
Resolution.setDesignSize()
